<template>
	<view class="search">
		<view class="left">
			<view class="icon">
				<uni-icons type="search" size="18" color="#BBBBBB"></uni-icons>
			</view>
			<input class="input" :value="value" type="text" @blur="onInput">
		</view>
		<view v-if="isFilter" class="right" @click="onFilter">
			筛选
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			value:String,
			isFilter:{
				type:Boolean,
				default:true
			}
		},
		methods:{
			onInput(e){
				this.$emit('input',e.target.value)
			},
			onFilter(){
				this.$emit('filter')
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.search{
		@include flex-r-start-center;
		.left{
			flex: 1 0 0;
			height: 70rpx;
			@include flex-r-start-center;
			border: #e6e6e6 4rpx solid;
			border-radius: 15rpx;
			padding: 0 14rpx;
			.icon{
				flex: 0 0 auto;
			}
			.input{
				flex: 1 0 0;
				color: #BBBBBB;
				font-size: 28rpx;
				padding-left: 14rpx;
			}
		}
		.right{
			flex: 0 0 auto;
			color: #101010;
			font-size: 28rpx;
			padding-left: 30rpx;
		}
	}
</style>